<template>
  <div>
    <div class="outcome width-style" v-if="outcome">
      <p class="outcome-title">您的搜索结果为：</p>
      <div
        class="outcome-box"
        v-for="(item, i) in outcomeList.slice(0, 10)"
        :key="i"
        @click="goArticle(item.artId,item.entryId)"
      >
        <p class="box-title" v-if="item.sort === 0">{{ item.title }}</p>
        <p class="box-title" v-if="item.sort === 1">{{ item.entryName }}</p>
        <el-row class="box-info">
          <el-col :span="4">
            <div class="info-name" v-if="item.sort === 0">
              作者：{{ item.authorName }}
            </div>
            <div class="info-name" v-if="item.sort === 1">
              类别：{{ item.cataName }}
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-date">{{ item.publishTime }}</div>
          </el-col>
        </el-row>
      </div>
      <!-- <div
        class="outcome-box"
        v-for="(item, i) in entryList.slice(0, 5)"
        :key="i"
        @click="goEntry(item.entryId)"
      >
        <p class="box-title">{{ item.entryName }}</p>
        <el-row class="box-info">
          <el-col :span="4">
            <div class="info-name">
              {{ item.cataName }}
            </div>
          </el-col>
          <el-col :span="4">
            <div class="info-date">{{ item.pulishTime }}</div>
          </el-col>
        </el-row>
      </div> -->
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="page"
        :page-size="pageSize"
        @current-change="handleCurentChange"
        :total="total"
        class="pagination"
      >
      </el-pagination>
    </div>
    <div v-if="!outcome">
      <p style="margintop: 100px; fontsize: 20px; fontweight: 700">
        很抱歉，没有找到相应结果
      </p>
    </div>
  </div>
</template>

<script>
import { renderTime, shuffle } from "@/utils/tools.js";
export default {
  layout: "personalCenterLayout",
  data() {
    return {
      page: 1,
      pageSize: 10,
    };
  },
  methods: {
    goEntry(entryId) {
      let link = this.$router.resolve({
        path: "/entry",
        query: { entryId: entryId },
      });
      window.open(link.href, "_blank");
    },
    goArticle(artId=-1,entryId=-1) {
      if(artId===-1){
        this.goEntry(entryId)
        return 
      }
      let link = this.$router.resolve({
        path: "/article",
        query: { artId: artId },
      });
      window.open(link.href, "_blank");
    },
    async handleCurentChange(page) {
      // let newsRes = await this.$api.reqNewsByTitleAndHits(
      //   searchKey,
      //   page,
      //   this.pageSize
      // );
      // let generalRes = await this.$api.reqCoreGeneralByKeyAndHits(
      //   this.searchKey,
      //   page,
      //   5
      // );
      let generalRes1 = await this.$api.reqCoreGeneralByAuthorAndHits(
        this.searchKey,
        page,
        10
      );
      let generalRes2 = await this.$api.reqCoreGeneralByTitleAndHits(
        this.searchKey,
        page,
        10
      );
      let generalRes3 = await this.$api.reqCoreGeneralByContentAndHits(
        this.searchKey,
        page,
        10
      );
      let generalList;
      if (
        generalRes1.code === 200 &&
        generalRes2.code === 200 &&
        generalRes3.code === 200
      ) {
        generalList = generalRes1.rows.concat(
          generalRes2.rows,
          generalRes3.rows
        );
        for (let item of generalList) {
          item.publishTime = renderTime(item.publishTime);
          item.sort = 0;
        }
        // console.log(generalList);
      }
      let entryRes = await this.$api.reqEntryByKeyAndHits(
        this.searchKey,
        page,
        5
      );
      // if (newsRes.code === 200) {
      //   for (let item of newsRes.rows) {
      //     item.publishTime = renderTime(item.publishTime);
      //   }
      // }

      if (entryRes.code === 200) {
        for (let item of entryRes.rows) {
          item.publishTime = renderTime(item.publishTime);
          item.sort = 1;
        }
      }
      let outcomeList = generalList.concat(entryRes.rows);
      outcomeList = shuffle(outcomeList);
      this.outcomeList=outcomeList
      // this.generalList = generalList;
      // this.entryList = entryRes.rows;
    },
  },
  async asyncData({ app, route }) {
    let searchKey = route.query.searchKey;
    // let newsRes = await app.api.reqCoreGeneralByKeyAndHits(searchKey, 1, 5);
    let generalRes1 = await app.api.reqCoreGeneralByAuthorAndHits(
      searchKey,
      1,
      10
    );
    let generalRes2 = await app.api.reqCoreGeneralByTitleAndHits(
      searchKey,
      1,
      10
    );
    let generalRes3 = await app.api.reqCoreGeneralByContentAndHits(
      searchKey,
      1,
      10
    );
    let entryRes = await app.api.reqEntryByKeyAndHits(searchKey, 1, 10);
    // if (newsRes.code === 200) {
    //   for (let item of newsRes.rows) {
    //     item.publishTime = renderTime(item.publishTime);
    //   }
    // }
    let generalList;
    if (
      generalRes1.code === 200 &&
      generalRes2.code === 200 &&
      generalRes3.code === 200
    ) {
      generalList = generalRes1.rows.concat(generalRes2.rows, generalRes3.rows);
      for (let item of generalList) {
        item.publishTime = renderTime(item.publishTime);
        item.sort = 0;
      }
    }
    if (entryRes.code === 200) {
      for (let item of entryRes.rows) {
        item.publishTime = renderTime(item.publishTime);
        item.sort = 1;
      }
    }
    let total =
      generalRes1.total +
      generalRes2.total +
      generalRes3.total +
      entryRes.total;
    let outcome;
    if (total !== 0) {
      outcome = true;
    } else {
      outcome = false;
    }
    let outcomeList = generalList.concat(entryRes.rows);
    // console.log('之前的',outcomeList);
    outcomeList = shuffle(outcomeList);
    // console.log('之后的',outcomeList);
    return {
      searchKey,
      total,
      // generalList,
      // entryList: entryRes.rows,
      outcomeList,
      outcome,
    };
  },
};
</script>

<style scoped lang="less">
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.outcome {
  .outcome-title {
    font-size: 16px;
    text-align: left;
    padding-left: 20px;
    padding-top: 5px;
    border-top: 1px solid #e9ebec;
    margin-bottom: 20px;
  }
  .outcome-box {
    margin-top: 20px;
    text-align: left;
    padding-left: 20px;
    border-bottom: 1px dashed #e9ebec;
    padding-bottom: 10px;
    &:hover {
      cursor: pointer;
    }
    .box-title {
      color: @themeColor;
      font-size: 18px;
      &:hover {
        text-decoration: underline;
        cursor: pointer;
      }
    }
    .box-content {
      font-size: 14px;
      color: #797979;
      margin-top: 10px;
      overflow: hidden;
      text-overflow: ellipsis; //超出部分以省略号显示
      white-space: nowrap;
      width: 1000px;
    }
    .box-info {
      margin-top: 10px;
      .info-name {
        font-size: 13px;
        color: #797979;
        overflow: hidden;
        text-overflow: ellipsis; //超出部分以省略号显示
        white-space: nowrap;
        color: #4b7902;
      }
      .info-date {
        font-size: 13px;
        color: #797979;
        padding-left: 40px;
      }
    }
  }
  .pagination {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
</style>